
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<html lang="en" class="pxp-root">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="shortcut icon" href="${path}/static/web/images/favicon.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap" rel="stylesheet">
    <link href="${path}/static/web/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${path}/static/web/css/font-awesome.min.css">
    <link rel="stylesheet" href="${path}/static/web/css/owl.carousel.min.css">
    <link rel="stylesheet" href="${path}/static/web/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="${path}/static/web/css/animate.css">
    <link rel="stylesheet" href="${path}/static/web/css/style.css">

    <title>个人短消息</title>
</head>
<body style="background-color: var(--pxpSecondaryColorLight);">
<jsp:include page="/web/personal/inc/personalCenterHead"></jsp:include>
<div>
Welcome<br/><input id="text" type="text"/>
<button onclick="send()">发送消息</button>
<hr/>
<!--userno:发送消息人的编号-->
发送人:<div id="userno">2</div>
接收人：<input type="text" id="usernoto"><br>
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<hr/>
<div id="message"></div>



<footer>
    <div class="pxp-footer-copyright pxp-text-light">© 2021 乔布斯特. 保留所有权力.</div><!--© 2021 Jobster. All Right Reserved.-->
</footer>
    <script type="text/javascript">
        var websocket = null;
        var userno=document.getElementById('userno').innerHTML;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8080/webSocket/1");
        }
        else {
            alert('当前浏览器 Not support websocket')
        }
        //发送消息
        function send() {
            var message = document.getElementById('text').value;//要发送的消息内容
            document.getElementById('message').innerHTML += ("发送人："+userno+"---"+message) + '<br/>';
            var ToSendUserno=document.getElementById('usernoto').value; //接收人编号：4567
            message='{"contentText":"'+message+'","toUserId":"'+ToSendUserno+'"}'//将要发送的信息和内容拼起来，以便于服务端知道消息要发给谁
            console.log(message);
            websocket.send(message);
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("WebSocket连接发生错误");
        };

        //连接成功建立的回调方法
        websocket.onopen = function () {
            setMessageInnerHTML("WebSocket连接成功");
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            setMessageInnerHTML(event.data);
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("WebSocket连接关闭");
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            closeWebSocket();
        }

        //将消息显示在网页上
        function setMessageInnerHTML(sendMessage) {
            document.getElementById('message').innerHTML += sendMessage + '<br/>';
        }

        //关闭WebSocket连接
        function closeWebSocket() {
            websocket.close();
        }
    </script>
</div>

<script src="${path}/static/web/js/jquery-3.4.1.min.js"></script>
<script src="${path}/static/web/js/bootstrap.bundle.min.js"></script>
<script src="${path}/static/web/js/owl.carousel.min.js"></script>
<script src="${path}/static/web/js/nav.js"></script>
<script src="${path}/static/web/js/Chart.min.js"></script>
<script src="${path}/static/web/js/main.js"></script>
</body>
</html>
